<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background: pink;
            animation: myfirst 5s;
            /* 当在@keyframe创建动画，把它绑定到一个选择器(此处绑定到div元素)，
            否则动画不会有任何效果。
            指定至少这两个CSS3的 动画的名称或动画的时长
            任一属性绑定向一个选择器：
            必须定义动画的名称和动画的持续时间。
            如果省略的持续时间，动画将无法运行，因为默认值是0*/
        }
        
        @keyframes myfirst
        /* @keyframes规则是创建动画名myfirst  */
        
        {
            from {
                background: greenyellow;
            }
            to {
                background: blue;
            }
        }
    </style>
</head>

<body>
    <div>

    </div>

</body>

</html>